<template>
  <div>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-row>
        <el-col :span="4">
          <el-input v-model="queryInfo.query" placeholder="请输入管理员名"> </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" class="search-btn">查找</el-button>
        </el-col>
      </el-row>
      <!-- 内容主体部分 -->
      <el-table ref="multipleTable" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="角色名称" width="120"> </el-table-column>
        <el-table-column prop="address" label="角色介绍"> </el-table-column>
        <el-table-column prop="address" label="创建时间"> </el-table-column>
        <el-table-column prop="address" label="状态"> </el-table-column>
        <el-table-column prop="address" label="操作"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'Rights',
  data() {
    return {
      queryInfo: {
        query: '',
      },
      currentPage4: 4,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="less" scoped>
.search-btn {
  margin-left: 5px;
}
</style>
